<template>
  <div class="app-container">
    <div class="cardBox">
      <div class="filter-container">
        <el-form :inline="true" class="search-form" label-width="90px">
          <el-row style="display: flex; flex-wrap: wrap">
            <div style="flex: 1">
              <el-form-item label="名称" style="margin: 5px 0">
                <el-input
                  placeholder="名称"
                  v-model="searchForm.name"
                  clearable
                >
                </el-input>
              </el-form-item>
            </div>
            <div style="margin: 5px 0; text-align: right">
              <el-form-item>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="getListWay"
                  >查询</el-button
                >
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-refresh"
                  @click="resetting"
                  >重置</el-button
                >
              </el-form-item>
            </div>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="cardBox" style="height: calc(85vh - 80px); margin-top: 20px">
      <div class="marginBottom">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-button
              v-hasPermi="'agreement/save'"
              type="primary"
              size="small"
              @click="addWay('/admin/agreement/save')"
              icon="el-icon-circle-plus-outline"
              >管理协议</el-button
            >
          </el-col>
          <el-col :span="4" style="float: right">
            <div class="right-panel el-button-group">
              <el-button
                class=""
                icon="el-icon-refresh"
                size="mini"
                @click="resetting"
              ></el-button>
              <el-dropdown trigger="click" :hide-on-click="false">
                <span class="el-dropdown-link">
                  <el-button
                    class=""
                    icon="el-icon-s-operation"
                    size="mini"
                  ></el-button>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                    <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                      tableTheadOptions[fruit].label
                    }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-scrollbar
        wrap-style="overflow-x:hidden;"
        style="height: calc(73vh - 80px)"
      >
        <el-table
          :header-cell-style="{
            'background-color': '#f3f8fe',
            color: '#606266',
            height: '50px',
          }"
          v-loading="loading"
          highlight-current-row
          :data="dataList"
          style="width: 100%"
        >
          <el-table-column
            v-for="fruit in tableThead"
            :key="fruit"
            :label="tableTheadOptions[fruit].label"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="fruit == 'status'">
                <el-switch
                  @change="switchShowWay(scope.row)"
                  v-model="scope.row.status"
                  :active-value="1"
                  :inactive-value="2"
                >
                </el-switch>
              </div>
              <span v-else>
                {{ scope.row[fruit] }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="80" align="center">
            <template slot-scope="scope">
              <el-button
                v-hasPermi="'label/edit'"
                style="margin-right: 10px"
                type="primary"
                size="mini"
                @click="puttagsWay(scope.row)"
              >
                编辑
              </el-button>
              <el-popconfirm
                title="这是一段内容确定删除吗？"
                @confirm="deltagsWay(scope.row)"
              >
                <el-button
                  v-hasPermi="'label/del'"
                  type="danger"
                  size="mini"
                  slot="reference"
                >
                  删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import {
  getSysAgreementList,
  getSysAgreementConfigList,
  SaveSysAgreement,
  getAgreementInfo,
  delAgreement,
  SaveAgreementStatus,
} from "@/api/admin/agreement";
import { getDictionaryTypeList } from "@/api/index";
const tableTheadOption = {
  created_at: {
    label: "创建时间",
    field: "created_at",
  },
  updated_at: {
    label: "更新时间",
    field: "updated_at",
  },
  dictionary_value_name: {
    label: "协议名称",
    field: "dictionary_value_name",
  },
  version: {
    label: "版本号",
    field: "version",
  },
  status: {
    label: "状态",
    field: "status",
  },
};

const allTableThead = [
  "created_at",
  "dictionary_value_name",
  "version",
  "updated_at",
  "status",
];
const defaultTableThead = [
  "created_at",

  "dictionary_value_name",
  "version",
  "updated_at",
  "status",
];
export default {
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1;
    },
  },
  data() {
    return {
      // 默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      loading: false,
      agreementList: [], // 协议类型
      searchForm: {},
      dataList: [],
    };
  },
  created() {
    const p1 = new Promise((req, rej) => {
      getDictionaryTypeList({ type: "sys_agreement_type", status: 1 }).then(
        (res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.$messages.error(res.msg);
            rej();
            return;
          }
          this.agreementList = res.data;
          console.log(this.agreementList);
          req();
        }
      );
    });
    Promise.all([p1])
      .then(() => {
        this.getListWay();
      })
      .catch(() => {
        this.loading = false;
      });
  },
  methods: {
    getListWay() {
      this.loading = true;
      getSysAgreementConfigList(this.searchForm).then((res) => {
        this.loading = false;
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          return;
        }
        this.dataList = res.data.list;
      });
    },
    resetting() {
      this.searchForm = {};
      this.getListWay();
    },
    deltagsWay(row) {
      this.loading = true;
      delAgreement({ id: row.id }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.loading = false;
          this.$messages.error(res.msg);
          this.getListWay();
          return;
        }
        if (res.code == 200) {
          this.$messages.success("删除成功");
          this.getListWay();
        } else {
          this.$messages.error(res.msg);
        }
      });
    },
    switchShowWay(val) {
      this.loading = true;
      var obj = {
        status: val.status,
        id: val.id,
      };
      SaveAgreementStatus(obj)
        .then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.loading = false;
            this.$messages.error(res.msg);
            this.getListWay();
            return;
          }
          if (res.code == 200) {
            this.$messages.success("修改成功");
            this.getListWay();
          } else {
            this.$messages.error(res);
            this.getListWay();
          }
        })
        .catch(() => {
          this.loading = false;
          this.getListWay();
        });
    },
    puttagsWay(row) {
      this.addWay(
        "/admin/agreement/save?id=" +
          row.id +
          "&valueId=" +
          row.dictionary_value_id
      );
    },
    addWay(url) {
      this.$router.push(url);
    },
  },
};
</script>

<style>
</style>